<template>
  <div class="CustomSteps mx-auto">
    <el-steps :active="active" :align-center="true">
      <el-step :title="translateTitle('Dams.HSM.上传工资单')">
        <template #icon>
          <vui-icon class="step-icon" icon="upload-cloud-2-line" />
        </template>
      </el-step>
      <el-step :title="translateTitle('Dams.HSM.核对数据')">
        <template #icon>
          <vui-icon class="step-icon" icon="chat-check-line" />
        </template>
      </el-step>
      <el-step :title="translateTitle('Dams.HSM.预览并发送')">
        <template #icon>
          <vui-icon class="step-icon" icon="send-plane-line" />
        </template>
      </el-step>
    </el-steps>
  </div>
</template>

<script>
  import { translateTitle } from '@/utils/i18n'
  export default {
    name: 'CustomSteps',
    props: {
      active: {
        type: Number,
        default: 1,
      },
    },
    methods: {
      translateTitle,
    },
  }
</script>

<style lang="scss">
  .CustomSteps {
    padding-top: 60px;
    .step-icon {
      font-size: 20px;
    }
    .el-step__icon {
      background-color: #d1d1d1;
      color: #fff;
      width: 40px;
      height: 40px;
    }
    .el-step__icon.is-text {
      border: none;
    }
    .el-step {
      &.is-horizontal .el-step__line {
        top: 20px;
      }
      &.is-center .el-step__line {
        left: 60%;
      }
    }
    .el-step .el-step__line {
      border: 1px dashed;
      width: 80%;
    }
    .is-finish {
      color: #6ab8b8 !important;
      .el-step__line {
        border-color: #6ab8b8;
      }
      .el-step__icon {
        background-color: #6ab8b8;
        color: #fff;
      }
    }
  }
</style>
